<template>
  <div class="settings-page">
    <div class="settings-header">
      <div class="header-left">
        <button class="back-btn" @click="goToHome">
          <SvgIcon name="back" width="16" height="16" />
        </button>
        <div class="title-group">
          <h1>设置</h1>
          <span class="subtitle">自定义您的应用程序</span>
        </div>
      </div>
    </div>
    <div class="settings-content">
      <div class="settings-section user-profile">
        <div class="avatar-wrapper">
          <div class="avatar">
            <span>{{ userInfo?.username?.[0] || 'Z' }}</span>
          </div>
          <div class="user-info">
            <h2 class="username">{{ userInfo?.username || 'ZBOX' }}</h2>
            <p class="email">{{ userInfo?.account || 'zbox@example.com' }}</p>
          </div>
        </div>
        <div class="buttons-container">
          <button class="logout-btn" @click="handleLogout">
            <SvgIcon name="logout" width="18" height="18" />
            <span>退出登录</span>
          </button>
          <button class="delete-account-btn" @click="handleDeleteAccount">
            <SvgIcon name="delete" width="18" height="18" />
            <span>注销账号</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue'
import { useRouter } from 'vue-router'
import { logout, deleteUser } from '@/api/user'
import { ref, onMounted } from 'vue'

const router = useRouter()
const userInfo = ref(null)

// 在组件挂载时获取用户信息
onMounted(() => {
  // 尝试从本地存储获取用户信息
  const storedUserInfo = localStorage.getItem('userInfo') || sessionStorage.getItem('userInfo')
  if (storedUserInfo) {
    try {
      userInfo.value = JSON.parse(storedUserInfo)
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }
})

const goToHome = () => {
  router.push('/')
}

const handleLogout = async () => {
  // 这里添加登出逻辑
  if (confirm('确定要退出登录吗？')) {
    try {
      // 调用登出接口
      await logout()

      // 清除本地存储的用户信息和token
      localStorage.removeItem('zbox-token')
      localStorage.removeItem('userInfo')
      sessionStorage.removeItem('userInfo')

      // 跳转到登录页面
      router.push('/login')
    } catch (error) {
      console.error('退出登录失败:', error)
    }
  }
}

// 处理注销账号
const handleDeleteAccount = async () => {
  if (confirm('确定要注销账号吗？此操作不可逆，将删除您的所有数据!')) {
    if (confirm('再次确认：注销后账号将永久删除，无法恢复！')) {
      try {
        // 调用注销账号接口
        const result = await deleteUser()

        if (result.success) {
          // 清除本地存储的用户信息和token
          localStorage.removeItem('zbox-token')
          localStorage.removeItem('zbox-account')
          localStorage.removeItem('zbox-password')
          localStorage.removeItem('userInfo')
          sessionStorage.removeItem('userInfo')

          // 跳转到登录页面
          router.push('/login')
        }
      } catch (error) {
        console.error('注销账号失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.settings-page {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5ea;
  background: #fff;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.header-left h1 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #1d1d1f;
}

.subtitle {
  font-size: 13px;
  color: #86868b;
}

.settings-content {
  flex: 1;
  padding: 24px;
  background-color: #f5f5f7;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 用户信息部分样式 */
.settings-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.user-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #4361ee;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.username {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0;
}

.email {
  font-size: 14px;
  color: #86868b;
  margin: 0;
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #ff3b30;
  background: none;
  color: #ff3b30;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: #ff3b30;
  color: white;
}

.logout-btn :deep(svg) {
  transition: all 0.3s;
}

.logout-btn:hover :deep(svg) {
  color: white;
}

.back-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background-color: #f5f5f7;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.back-btn:hover {
  background-color: #e5e5ea;
}

/* 添加按钮容器样式 */
.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 添加删除账号按钮样式 */
.delete-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #ff3b30;
  background: none;
  color: #ff3b30;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.delete-account-btn:hover {
  background-color: #ff3b30;
  color: white;
}

.delete-account-btn :deep(svg) {
  transition: all 0.3s;
}

.delete-account-btn:hover :deep(svg) {
  color: white;
}

@media (max-width: 480px) {
  .user-profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .buttons-container {
    width: 100%;
  }

  .logout-btn,
  .delete-account-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
